import {Component, OnInit} from '@angular/core';
import {NewPolicyService} from './new-policy.service';
import {RegionPolicyCondition} from '../model/region-policy-condition';
import {NewPolicy} from '../model/new-policy';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {Router} from '@angular/router';
import _ from 'lodash';

@Component({
  selector: 'app-new-policy',
  templateUrl: './new-policy.component.html',
  styleUrls: ['./new-policy.component.less']
})
export class NewPolicyComponent implements OnInit {
  policyCondition: RegionPolicyCondition = new RegionPolicyCondition();
  newPolicyList: NewPolicy[] = [];
  wordCloudList = [];
  isSpinning;

  constructor(private newService: NewPolicyService,
              private router: Router) {
  }

  ngOnInit(): void {
    this.getWordCloud();
    // this.getNewsPolicy();
  }

  setWordCloud(nameList: any, valueList: any) {
    const el = document.getElementById('word-chart') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const tar = params[0];
          return tar.name + ':' + tar.value + '<br />' + '占比' + ':' + Math.floor(tar.data.percentage * 1000) / 10 + '%';
        }
      },
      grid: {
        left: '1%',
        right: '1%',
        top: 0,
        bottom: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        // x轴标签隐藏
        axisLabel: {
          show: false
        },
        // x轴刻度隐藏
        axisTick: {
          show: false
        },
        // x轴线隐藏
        axisLine: {
          show: false
        },
        // grid区域内的分割线隐藏
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        data: nameList,
        axisLabel: {
          fontSize: 16
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      series: [{
        data: valueList,
        type: 'bar',
        barWidth: 16,
        itemStyle: {
          color: '#13ace8'
        },
      }]
    });
    myCharts.on('click', (params) => {
      this.navigateToDetail(params.data.name);
    });
  }

  navigateToDetail(value: number) {
    this.router.navigate(['/new-policy-list'], {queryParams: {keyword: value}});

  }

  getNewsPolicy() {
    this.isSpinning = true;
    // this.policyCondition.week = 0;
    this.newService.getNewsPolicy(this.policyCondition).subscribe(res => {
      this.newPolicyList = _.slice(res.result.newPolicys.list, 0, 6);
      this.isSpinning = false;
    });
  }

  getWordCloud() {
    this.isSpinning = true;
    this.newService.getWordCloud(this.policyCondition).subscribe(res => {
      res.result = res.result.reverse();    // 坑: 后台是从多到少返回的, 但图表显示时却反着。这里数据给翻转下。
      if (res.result.length > 10) {
        res.result = res.result.slice(0, 10);
      }      // 只保留前10。

      const nameList = [];
      const valueList = [];
      for (const resultItem of res.result) {
        nameList.push(resultItem.name);
        valueList.push(resultItem.value);
      }
      this.setWordCloud(nameList, res.result);
      this.isSpinning = false;
      this.getNewsPolicy();
    });
  }

}
